﻿<!DOCTYPE html>
<html>
    <head>
        <title>Politist</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="Themeum">

        <!-- Include All Stylesheet -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/font-awesome.min.css">
        <link rel="stylesheet" href="css/animate.css">
        <link rel="stylesheet" href="css/preset.css">
        <link rel="stylesheet" href="css/owl.carousel.css">
        <link rel="stylesheet" href="css/owl.theme.css">
        <link rel="stylesheet" href="css/magnific-popup.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/responsive.css">
        <link id="color-preset" rel="stylesheet" type="text/css" href="css/presets/preset1.css">
        <!-- Favicon Icon -->
        <link rel="icon"  type="image/png" href="images/favicon.png">
        <!-- Favicon Icon -->
        <!--[if lt IE 9]>
            <script src="js/html5shive.js"></script>
        <![endif]-->

    </head>
    <body>
        <!-- Colorpreset Area Start -->
        <div class="color-switcher">
            <a class="toggle-switch" href="#"><i class="fa fa-cog"></i></a>
            <div class="style-choose">
                <a href="#"  data-color="preset1"><img alt="Preset" src="images/colorpreset/preset1/preset1.png"></a>
                <a href="#"  data-color="preset2"><img alt="Preset" src="images/colorpreset/preset2/preset2.png"></a>
                <a href="#"  data-color="preset3"><img alt="Preset" src="images/colorpreset/preset3/preset3.png"></a>
                <a href="#"  data-color="preset4"><img alt="Preset" src="images/colorpreset/preset4/preset4.png"></a>
            </div>
        </div>
        <!-- Colorpreset Area End -->
        <!-- Header Area Start -->
        <header class="header-area">
            <ul class="social-icon pull-left">
                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                <li><a href="#"><i class="fa fa-instagram"></i></a></li>
            </ul>
            <nav class="main-menu hidden-xs hidden-sm">
                <ul class="menu-left pull-left">
                    <li class="menu-has-children">
                        <a href="index.html">Home</a>
                        <ul>
                            <li><a href="index.html">Home 1</a></li>
                            <li><a href="index2.html">Home 2</a></li>
                            <li><a href="index3.html">Home 3</a></li>
                            <li class="child-has-children">
                                <a href="#">Home 4</a>
                                <ul>
                                    <li><a href="#">Sample Home 1</a></li>
                                    <li><a href="#">Sample Home 2</a></li>
                                    <li class="child-has-children">
                                        <a href="#">Sample Home 3</a>
                                        <ul>
                                            <li><a href="#">Extra Homepage 1</a></li>
                                            <li><a href="#">Extra Homepage 2</a></li>
                                            <li><a href="#">Extra Homepage 3</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="biography.html">Biography</a></li>
                    <li class="menu-has-children">
                        <a href="news.html">News</a>
                        <ul>
                            <li><a href="newsDetails.html">News Details</a></li>
                        </ul>
                    </li>
                    <li><a href="event.html">Event</a></li>
                </ul>
                <div class="pull-left logo-area">
                    <a href="index.html"><img src="images/home1/logo.png" alt="Logo"></a>
                </div>
                <ul class="menu-right pull-left">
                    <li><a href="../templates/photo.html">Photos</a></li>
                    <li><a href="volunteer.html">Volunteer</a></li>
                    <li class="menu-has-children">
                        <a href="shop.html">Shop</a>
                        <ul>
                            <li><a href="shopDetails.html">Shop Details</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Donate</a></li> 
                </ul>
            </nav>
            <ul class="pull-right search-cart">
                <li><a href="#"><i class="fa fa-search"></i></a></li> 
                <li class="user-profile-menu">
                    <a href="profile.html"><i class="fa fa-user"></i></a>
                    <ul>
                        <li><a href="#">My Campaign</a></li>
                        <li><a href="#">Settings</a></li>
                        <li><a href="#">Sign Out</a></li>
                    </ul>
                </li>
                <li><a href="#"><i class="fa fa-shopping-basket"></i><span>(2)</span></a></li> 
                <li class="lang-select">
                    <a href="#">en<i class="fa fa-angle-down"></i></a>
                    <div id="language">
                        <a href="#">En</a>
                        <a href="#">Fr</a>
                        <a href="#">Br</a>
                    </div>
                </li> 
            </ul>
            <div class="clearfix"></div>
        </header>
        <div class="hidden-lg hidden-md" id="toggle-menu">
            <div class="pull-left logo-area">
                <a href="index.html"><img src="images/home1/logo.png" alt="Logo"></a>
            </div>
            <div class="mobile-menu-toggle pull-right">
                <a href="#"><i class="fa fa-bars"></i></a>
            </div>
            <div class="clearfix"></div>
            <nav class="mobile-menu pull-left hidden-lg hidden-md">
                <ul>
                    <li class="mobile-menu-has-children">
                        <a href="index.html">Home</a>
                        <ul>
                            <li><a href="index.html">Home 1</a></li>
                            <li><a href="index2.html">Home 2</a></li>
                            <li><a href="index3.html">Home 3</a></li>
                        </ul>
                    </li>
                    <li><a href="biography.html">Biography</a></li>
                    <li class="mobile-menu-has-children">
                        <a href="news.html">News</a>
                        <ul>
                            <li><a href="newsDetails.html">News Details</a></li>
                        </ul>
                    </li>
                    <li><a href="event.html">Event</a></li>
                    <li><a href="../templates/photo.html">Photos</a></li>
                    <li><a href="volunteer.html">Volunteer</a></li>
                    <li class="mobile-menu-has-children">
                        <a href="shop.html">Shop</a>
                        <ul>
                            <li><a href="shopDetails.html">Shop Details</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Donate</a></li> 
                </ul>
            </nav>
        </div>
        <!-- Header Area End -->

        <!-- Breadcrumbs Area Start -->
        <section class="breadcrumbs-area">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 col-xs-12">
                        <div class="bread-content text-left">
                            <h2>Shop</h2>
                            <ul>
                                <li><a href="#">Home</a><span>/</span></li>
                                <li>Shop</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Breadcrumbs Area End -->

        <!-- Product Details Area Start -->
        <section class="shop-details-area">
            <div class="container">
                <div class="row">
                    <div class="col-md-7 col-xs-12">
                        <div class="product-details-img">
                            <img src="images/shop-details/product1.jpg" alt="">
                        </div>
                        <div class="small-products">
                            <img class="wow fadeInLeft" src="images/shop-details/small-product-1.png" alt="">
                            <img class="wow fadeInLeft" src="images/shop-details/small-product-2.png" alt="">
                            <img class="wow fadeInLeft" src="images/shop-details/small-product-3.png" alt="">
                        </div>
                    </div>
                    <div class="col-md-5 col-xs-12">
                        <div class="product-description">
                            <span>In stock <i class="fa fa-check"></i></span>
                            <h3>Win Cam for Politist <br>Custom Tee</h3>
                            <h4>$25.00</h4>
                            <h5>Details</h5>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
                                ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                                ullamco laboris nisi ut aliquip ex ea commodo consequat.
                            </p>
                        </div>
                        <div class="product-size-selctor">
                            <a href="#" id="meta-selector"><i class="fa fa-angle-down"></i></a>
                            <p><span>Large</span>(length: 70cm, Width: 51cm)</p>
                            <ul class="product-size-data">
                                <li data-content="<span>Extra Large</span>(length: 70cm, Width: 51cm)"><span>Extra Large</span>(length: 70cm, Width: 51cm)</li>
                                <li data-content="<span>Large</span>(length: 70cm, Width: 51cm)"><span>Large</span>(length: 70cm, Width: 51cm)</li>
                                <li data-content="<span>Medium</span>(length: 70cm, Width: 51cm)"><span>Medium</span>(length: 70cm, Width: 51cm)</li>
                                <li data-content="<span>Small</span>(length: 70cm, Width: 51cm)"><span>Small</span>(length: 70cm, Width: 51cm)</li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <div class="product-meta">
                            <div class="product-counter pull-left">
                                <span>+</span>
                                <input type="text" value="01" name="count">
                                <span>-</span>
                            </div>
                            <div class="product-color pull-left">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="product-buttons-group" data-wow-duration="700ms" data-wow-delay="650ms">
                            <a href="#" class="filled-button">Add to Cart</a>
                            <ul>
                                <li><a href="#" class="facebook"><i class="fa fa-facebook-official"></i><span>Share</span></a></li>
                                <li><a href="#" class="twitter"><i class="fa fa-twitter"></i><span>Tweet</span></a></li>
                                <li><a href="#" class="pinterest"><i class="fa fa-pinterest"></i><span>Pin It</span></a></li>
                                <li><a href="#" class="gplus"><i class="fa fa-google-plus"></i><span>+1</span></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 col-xs-12 text-center related-product">
                        <h2 class="section-title">Related <span>Items</span></h2>
                    </div>
                    <div class="clearfix"></div>
                    <div id="product-crousel" class="owl-carousel owl-theme">
                        <div class="col-md-4 col-xs-12 text-center">
                            <div class="product-details">
                                <div class="product-img">
                                    <img src="images/home1/tshirt1.png" alt="">
                                    <a href="#" class="filled-button">Add to Cart</a>
                                </div>
                                <h4><a href="#">Politistst tshirt</a></h4>
                                <p>$15.00</p>
                            </div>
                        </div>
                        <div class="col-md-4 col-xs-12 text-center">
                            <div class="product-details">
                                <div class="product-img">
                                    <img src="images/home1/tshirt2.png" alt="">
                                    <a href="#" class="filled-button">Add to Cart</a>
                                </div>
                                <h4><a href="#">Politistst tshirt</a></h4>
                                <p>$15.00</p>
                            </div>
                        </div>
                        <div class="col-md-4 col-xs-12 text-center">
                            <div class="product-details">
                                <div class="product-img">
                                    <img src="images/home1/tshirt3.png" alt="">
                                    <a href="#" class="filled-button">Add to Cart</a>
                                </div>
                                <h4><a href="#">Politistst tshirt</a></h4>
                                <p>$15.00</p>
                            </div>
                        </div>
                        <div class="col-md-4 col-xs-12 text-center">
                            <div class="product-details">
                                <div class="product-img">
                                    <img src="images/home1/tshirt1.png" alt="">
                                    <a href="#" class="filled-button">Add to Cart</a>
                                </div>
                                <h4><a href="#">Politistst tshirt</a></h4>
                                <p>$15.00</p>
                            </div>
                        </div>
                        <div class="col-md-4 col-xs-12 text-center">
                            <div class="product-details">
                                <div class="product-img">
                                    <img src="images/home1/tshirt2.png" alt="">
                                    <a href="#" class="filled-button">Add to Cart</a>
                                </div>
                                <h4><a href="#">Politistst tshirt</a></h4>
                                <p>$15.00</p>
                            </div>
                        </div>
                        <div class="col-md-4 col-xs-12 text-center">
                            <div class="product-details">
                                <div class="product-img">
                                    <img src="images/home1/tshirt3.png" alt="">
                                    <a href="#" class="filled-button">Add to Cart</a>
                                </div>
                                <h4><a href="#">Politistst tshirt</a></h4>
                                <p>$15.00</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Product Details Area End -->

        <!-- Footer Area Start -->
        <footer class="footer-two-area">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 col-xs-12 text-center">
                        <div class="footer-logo">
                            <a href="index.html"><img src="images/home2/footerLogo.png" alt=""></a>
                        </div>
                        <ul class="social-icon text-center">
                            <li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li>
                            <li><a class="twitter" href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a class="gplus" href="#"><i class="fa fa-google-plus"></i></a></li>
                            <li><a class="instagram" href="#"><i class="fa fa-instagram"></i></a></li>
                            <!-- Extra Social Icon
                                <li><a href="#" class="youtube"><i class="fa fa-youtube"></i></a></li>
                                <li><a href="#" class="dribble"><i class="fa fa-dribbble"></i></a></li>
                                <li><a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a></li>
                                <li><a href="#" class="pinterest"><i class="fa fa-pinterest"></i></a></li>
                                <li><a href="#" class="behance"><i class="fa fa-behance"></i></a></li>
                                <li><a href="#" class="flickr"><i class="fa fa-flickr"></i></a></li>
                                <li><a href="#" class="vk"><i class="fa fa-vk"></i></a></li>
                                <li><a href="#" class="skype"><i class="fa fa-skype"></i></a></li>
                                <li><a href="#" class="envelope"><i class="fa fa-envelope"></i></a></li>
                            -->
                        </ul>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2 col-md-offset-1 col-xs-12 text-center">
                        <p class="copy-right">&copy; 2016 politist </p>
                    </div>
                    <div class="col-md-9 col-xs-12 text-left">
                        <ul class="footer-menu">
                            <li><a href="#">Terms of Service</a></li>
                            <li><a href="#">Privacy Policy</a></li>
                            <li><a href="#">Contact</a></li>
                            <li><a href="#">Speeches</a></li>
                            <li><a href="#">Biography</a></li>
                            <li><a href="#">Donation</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </footer>
        <!-- Footer Area End -->
        <!-- Include All JavaScript -->
        <script src="js/jquery.min.js"></script>
        <script src="js/jquery.appear.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/owl.carousel.min.js"></script>
        <script src="js/jquery.magnific-popup.min.js"></script>
        <script src="js/jquery.countdown.min.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>

